<template>
  <div class="info-map">
    <h2 class="title">防疫地图</h2>
    <div v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <div class="card" style="height: 600px;">
        <div id="map" style="width: 100%;height: 100%;"></div>
      </div>
      <div class="card" style="height: 600px;">
        <div id="pie" style="width: 100%;height: 100%;"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import getMap from '@/utils/getMap'
  import getInfo from './getInfo'

  export default {
    name: 'info-map',
    data () {
      return {
        loading: false,
        data: {},
        list: [],
        map: null,
        pie: null
      }
    },
    methods: {
      async init () {
        this.loading = true
        if (!this.$echarts.getMap('全国')) {
          await getMap('100000', '全国')
        }
        const data = await getInfo()
        this.loading = false
        this.data = data
        this.list = data.areaTree[0].children.map(v => {
          return {
            name: v.name,
            value: v.total.nowConfirm,
            suspect: v.total.suspect
          }
        })
        this.map = this.$echarts.init(document.getElementById('map'))
        this.pie = this.$echarts.init(document.getElementById('pie'))
        this.map.setOption({
          tooltip: {
            show: true,
            formatter (params) {
              return `地区：${params.name}<br>现存确诊：${params.data.value}<br>疑似：${params.data.suspect}`
            }
          },
          visualMap: {
            show: true,
            type: 'piecewise',
            seriesIndex: [0],
            pieces: [{
              gt: 5000,
              label: "5000 以上",
              color: "#215096"
            }, {
              gte: 1000,
              lt: 5000,
              label: "1000 - 4999",
              color: "#3598c1"
            }, {
              gte: 100,
              lt: 1000,
              label: "100 - 999 人",
              color: "#40a9ed"
            }, {
              gte: 10,
              lt: 100,
              label: "10 - 99 人",
              color: "#b7d6f3"
            }, {
              gte: 1,
              lt: 10,
              label: "1 - 9",
              color: "#edfbfb"
            }, {
              value: 0,
              label: "0",
              color: "#fff"
            }],
            textStyle: {
              color: '#fff'
            },
            seriesIndex: [0]
          },
          geo: [{
            map: '全国',
            zoom: 1.1, //默认显示级别
            emphasis: {
              itemStyle: {
                areaColor: '#1655bd'
              },
            },
            label: {
              show: true,
              color: '#fff'
            }
          }],
          series: [{
            name: 'map',
            type: 'map',
            geoIndex: 0,
            data: this.list
          }]
        })
        this.pie.setOption({
          tooltip: {
            show: true,
            formatter (params) {
              return `地区：${params.name}<br>现存确诊：${params.data.value}<span class="ml-5">（${(params.percent).toFixed(2)}%）</span><br>疑似：${params.data.suspect}`
            }
          },
          series: [{
            name: 'map',
            type: 'pie',
            data: this.list
          }]
        })
      }
    },
    mounted () {
      this.init()
    }
  }
</script>

<style>

</style>
